<template>
  <div class="dashboard-container">
    <h2 class="head-big-title">Troli Beli Belah
      <div style="float: right;margin-right: 7%;cursor: pointer;" @click="$router.push({path:'/Shop/Shopping-Cart'})">
        <svg-icon v-if="tableData.length > 0" icon-class="gouwucheman" style="font-size: 24px;margin-right: 10px;position: relative;bottom: 5px" />
        <svg-icon v-else icon-class="gouwuchekong" style="font-size: 24px;margin-right: 10px;position: relative;bottom: 5px" />
        <p style="display: inline-block;font-size: 14px;"><span>{{ $formatMoneyStr(total) }}</span><span style="display: block;">{{ tableData.length }} barang</span></p>
      </div>
    </h2>
    <el-input
      round
      placeholder="Search"
      v-model="searchProductName"
      @blur="searchProduct"
      prefix-icon="el-icon-search"
      style="width: 92%;margin: 10px 4%;display: block;"></el-input>
    <Pathnavigation style="margin-left: 3%;"></Pathnavigation>
    <el-card shadow="always" v-if="tableData.length && (tableData.length >0) " :body-style="{ padding: '10px' }" style="width: 92%;margin: 0 4%;background-color: white;border-radius: 10px;">
      <el-table
        :show-header="false"
        :data="tableData"
        style="margin: 0;">
        <el-table-column label="Logo" width="100">
          <template slot-scope="scope">
            <div style="width: 100%;height: 100%;position: relative;">
              <el-image
                style="width: 64px; height: 64px"
                :src="picbase + scope.row.picUrl">
              </el-image>
              <div @click="handleDel(scope.row)" style="width: 26px;height: 26px;position: absolute;bottom: 6px;right: 16px;color: white;background-color: rgba(245,0,3,0.8)">
                <svg-icon icon-class="ico-del" style="margin: 3px;font-size: 20px;"></svg-icon>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <p>{{$formatMoneyStr(scope.row.price)}}</p>
            <el-input v-model="scope.row.quantity" @change="changeQuantity(scope.row)" placeholder="Kuantiti"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center">
          <template slot-scope="scope">
            <p>{{$formatMoneyStr(scope.row.total)}}</p>
          </template>
        </el-table-column>
<!--          <el-table-column prop="price" align="center" label="Price"></el-table-column>-->
<!--          <el-table-column prop="total" label="Jumlah"></el-table-column>-->
<!--          <el-table-column label="Tindakan" width="166" align="center">-->
<!--            <template slot-scope="scope">-->
<!--              <el-button-->
<!--                type="danger"-->
<!--                size="mini"-->
<!--                icon="el-icon-delete"></el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
      </el-table>
    </el-card>

    <el-card shadow="always" v-if="tableData.length && (tableData.length >0) " :body-style="{ padding: '10px' }" style="width: 92%;margin: 15px 4% 0 4%;background-color: white;border-radius: 10px;">
      <h2 style="font-size: 18px;text-align: left;">Nota Penghantaran</h2>
      <el-input
        style="margin-bottom: 16px;margin-top: 15px;"
        type="textarea"
        :rows="5"
        placeholder="Note"
        v-model="note">
      </el-input>
    </el-card>
    <el-card shadow="always" v-if="tableData.length && (tableData.length >0) " :body-style="{ padding: '10px' }" style="width: 92%;margin: 15px 4% 0 4%;background-color: white;border-radius: 10px;">
      <div class="total-sum-div" v-if="tableData.length && (tableData.length >0) ">
        <p class="middle-info"><label>Jumlah Kecil</label>: {{$formatMoneyStr(total)}}</p>
        <p class="middle-info"><label>Jumlah Penghantaran</label>: RM 0.00</p>
        <p class="middle-info"><label>Penyesuaian</label>: RM 0.00</p>
        <el-divider></el-divider>
        <p class="middle-info"><label>Jumlah Pesanan</label>{{$formatMoneyStr(total)}}</p>
        <div>
          <el-button type="warning" round @click="checkOut" style="float: right;margin: 15px 4% 15px;">Semak Keluar</el-button>
        </div>
      </div>
    </el-card>
    <el-card shadow="always" v-else :body-style="{ padding: '10px' }" style="width: 92%;margin: 15px 4% 0 4%;background-color: white;border-radius: 10px;">
      <div style="text-align: center;">
        <strong style="line-height: 233px;">Cepatlah，
          <span @click="$router.push({path:'/Shop/Query'})" style="color: #1482f0;cursor: pointer;text-decoration: underline;"> beli sekarang! </span></strong>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { order_delcartApi, order_querycartApi, order_editcartApi } from '@/api/user'

export default {
  name: 'Activityrecord',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      tableData: [],
      productList: [],
      searchFormData: {},
      shopCartState: false,
      note: '',
      searchProductName: '',
      total: 0,
      orderChart: ''
    }
  },
  created() {
  },
  mounted() {
    this.getShopCart()
  },
  methods: {
    changeNew() {
      this.$forceUpdate()
    },
    searchProduct() {
      if (this.searchProductName) {
        if (this.searchProductName.length > 0) {
          this.$router.push({
            name: 'queryShop',
            params: {
              id: this.searchProductName
            }
          })
        }
      }
    },
    saveMsg() {
      localStorage.setItem('saveMsg', this.note)
    },
    handleDel(item) {
      const requestData = {
        'productId': item.productId,
        'quantity': item.quantity
      }
      order_delcartApi(requestData).then(res => {
        this.$message({
          message: 'Berjaya padam!',
          type: 'success'
        })
        this.getShopCart()
      }).catch(err => {
        console.log(err)
      })
    },
    changeQuantity(row) {
      order_editcartApi({ productId: row.productId, quantity: row.quantity }).then(res => {
        this.$message({
          message: 'Berjaya ubah!',
          type: 'success'
        })
        this.getShopCart()
      }).catch(err => {
        this.getShopCart()
        console.log(err)
      })
    },
    checkOut() {
      this.saveMsg()
      this.$router.push({ path: '/Shop/Checkou' })
    },
    getShopCart() {
      order_querycartApi().then(res => {
        this.total = 0
        if (res.data) {
          if (res.data.length) {
            if (res.data.length > 0) {
              this.tableData = res.data
              for (let i = 0; i < res.data.length; i++) {
                this.total = this.total + res.data[i].total
              }
              return
            }
          }
        }
        this.tableData = []
        this.total = 0
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .head-big-title{
    text-align: left;
    font-size: 20px;
    margin: 20px 0 0 3%;
  }
  .dashboard-container{
    margin-top: 20px;
    text-align: center;
  }

</style>
<style scoped>
  /deep/.head-search label{
    line-height: 30px;
  }
  .total-sum-div .middle-info{
    text-align: left;
    line-height: 24px;
  }
  .total-sum-div .middle-info label{
    display: inline-block;
    width: 120px;
  }
  .total-sum-div .middle-info span{
    display: inline-block;
    width: 66px;
  }
</style>
